<template>
  <div class="header">
    <div class="fixed-header"
      :style="styleObj"
      v-if="showFixed">
      <router-link class="icon-back iconfont"
        to="/"
        tag="span">
        &#xe624;
      </router-link>
      <p>{{ sightName }}</p>
    </div>
    <router-link to="/"
      tag="div"
      class="abs-header iconfont"
      v-else>
      &#xe624;
    </router-link>
  </div>
</template>

<script>
const TOP = 46
const BOTTOM = 200
export default {
  name: 'DetailHeader',
  props: {
    sightName: String
  },
  data () {
    return {
      scrollTop: 0
    }
  },
  computed: {
    showFixed () {
      return this.scrollTop >= TOP
    },
    styleObj () {
      return {
        opacity: Math.min(this.scrollTop / BOTTOM, 1)
      }
    }
  },
  methods: {
    handleScroll (e) {
      const scrollTop = e.target.scrollingElement.scrollTop
      this.scrollTop = scrollTop
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .header
    position absolute
    left 0
    top 0
    width 100%
    color #fff
    .fixed-header
      z-index 9
      position fixed
      width 100%
      background $bgColor
      line-height $headerHeight
      text-align center
      font-size .36rem
      .icon-back
        position absolute
        left 0
        top 0
        width .4rem
        padding 0 .2rem
    .abs-header
      width .72rem
      line-height .72rem
      text-align center
      background rgba(0, 0, 0, .5)
      border-radius .36rem
      margin .1rem
</style>
